<template>
  <div class="login-card__wrap">
    <div class="login-card-container">
      <div class="login-card__header">
        <span class="header-title" :style="{color: fontColor1}" @click="handleFist">{{title1}}</span>
        <span v-if="title2"> · </span>
        <span class="header-title" :style="{color: fontColor2}" @click="handleSecond">{{title2}}</span>
      </div>
      <div class="login-card__main">
        <slot name="mainContent"></slot>
        <slot name="mainFooter"></slot>
      </div>
      <div class="login-card__footer">
        <div class="img-box">
          <embed src="../../../assets/svg/qq.svg" type="image/svg+xml"/>
        </div>
        <div class="img-box" style="margin: 0 24px;">
          <embed src="../../../assets/svg/wechat.svg" type="image/svg+xml"/>
        </div>
        <div class="img-box">
          <embed src="../../../assets/svg/dingding.svg" type="image/svg+xml"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title1: String,
    title2: String
  },
  data() {
    return {
      fontColor1: '#2F2F2F',
      fontColor2: '#999'
    }
  },
  methods: {
    handleFist() {
      this.fontColor1 = '#2F2F2F';
      this.fontColor2 = '#999';
      this.$emit('firstWay')
    },
    handleSecond() {
      this.fontColor2 = '#2F2F2F';
      this.fontColor1 = '#999';
      this.$emit('secondWay')
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-card__wrap {
    width: 514*$length;
    text-align: center;
    padding-bottom: 57*$length;
    background-color: #fff;
    @include border-radius(10*$length);
    .login-card-container {
      width: 334*$length;
      margin: 0 auto;
      .login-card__header {
        display: inline-block;
        margin-top: 44*$length;
        margin-bottom: 45*$length;
        @include fontStyle(20, 27, 500, #999, center);
        @extend %cursorPointer;
        .header-title {
          @extend %animate-transition;
          &:hover {
            color: #2F2F2F;
          }
        }
      }
      .login-card__main {
      }
      .login-card__footer {
        width: 100%;
        margin: 0 auto;
        padding-top: 26*$length;
        @extend %flex-row-center;
        .img-box {
          width: 40*$length;
          height: 40*$length;
          line-height: 40*$length;
          background-color: #F4F8FA;
          @include border-radius(50%);
          @extend %cursorPointer;
          > embed {
            display: inline-block;
            vertical-align: middle;
            padding-bottom: 5*$length;
            @extend %cursorPointer;
          }
        }
      }
    }
  }
</style>
